<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-model访问修饰符</title>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h1>测试使用lazy 当点击回车/或者鼠标离焦时数据完成赋值操作</h1>
			<input type="text" name="name" id="name" v-model.lazy="name"/>
			<br>
			您输入的数据为:{{name}}
			
			<hr >
			<h2>测试使用number操作 指定数据类型</h2>
			<input type="number" name="age" id="age" v-model.number="age" /> <br>
			您的年龄为:{{age}} -数据类型为:{{typeof age}}
			
			<hr >
			<h2>测试使用trim操作   修改多余的空格</h2>
			<input type="text" name="message" id="message" v-model.trim="message"/> <br>
			您的输入内容为: {{message}}
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el : "#app",
				data : {
					name : "",
					age  : 1,
					message : ""
				}	
			});
		</script>
	</body>
</html>
